<template>
  <div class="login" v-show="showPage">
    <div class="title border-bottom">
      手机登录
    </div>
    <div class="avatar">
      <div class="avatar-box">
        <img src="~common/image/avatar.png">
        <p>微微晒</p>
      </div>
    </div>
    <div class="content">
      <div class="input-box">
        <div class="border">
          <input type="number" placeholder="请输入手机号"
                 v-model="phone"
                 oninput="if(value.length>11)value=value.slice(0,11)" ref="phone">
        </div>
      </div>
      <div class="input-box">
        <div class="border">
          <input type="number" placeholder="请输入验证码"
                 v-model="code"
                 oninput="if(value.length>4)value=value.slice(0,4)" ref="code">
        </div>
        <img @click="verifyCode($refs.verifyCode)" ref="verifyCode">
      </div>
      <div class="input-box">
        <div class="border">
          <input type="number" placeholder="请输入短信验证码"
                 v-model="noteCode"
                 oninput="if(value.length>6)value=value.slice(0,6)" ref="noteCode">
        </div>
        <span v-show="show" @click="sendCode()">获取验证码</span>
        <span v-show="!show" class="count ">{{count}}秒后重发</span>
      </div>
      <div class="input-box" v-if="showNick">
        <div class="border">
          <input type="text" placeholder="请输入名称" v-model="nick" ref="nick">
        </div>
      </div>
      <div class="btn" @click="_login">
        <span>登录</span>
      </div>
      <div class="zanNotReg" @click="zanReg" v-show="isWeChat">
        <span>创建贺卡，暂不注册</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {getSession, verify, sendCaptcha, login, islogin,isTourist,isMobile} from 'common/js/user'
  import {setTitle} from 'common/js/title'
  import {TouristLogin,getHead} from 'common/js/weChat'
  import {mapGetters, mapMutations} from 'vuex'
  import {computePV} from 'common/js/statistics'

  export default {
    data() {
      return {
        showPage: false, //判断是否登录
        phone: '',//手机号
        code: '',//验证码
        noteCode: '',//短信验证码
        nick: '',//名称
        session: '',//sessionid
        TIME_COUNT: '',//验证码
        show: true,//验证码
        count: '',//验证码
        timer: null,//验证码
        showNick: false,
        isWeChat:false,
        oId :'',
      }
    },
    mounted() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.isWeChat = true;
        if (window.location.href.indexOf("goWeChat") === -1) {
          window.location.href = "https://www.6vbuy.com/member/index.php?act=wx_login&op=getSilenceInfo&com=6vbuy&go=3";
        } else {
          if (window.location.href.indexOf("o_id") >  0) {
            this.oId = this.getUrl('o_id')
            history.pushState({}, '', '/login');
            isMobile({
              'openId':this.oId,
              'phpsid': localStorage.getItem('token')
            }).then((res)=>{
              if (res.status === 1) {
                if(res.data.is_mobile === 1){
                  localStorage.setItem('token', res.data.phpsid);
                  this.$router.push('/personal');
                }else{
                  if(res.data.is_Tourist === 1){
                    this.$router.push('/personal');
                  }else{
                    this.showPage = true;
                    setTitle('登录');
                    computePV({
                      page_type:7
                    })
                  }
                }
              }
            })
          }
        }
      }else{

        //判断是否游客登录
        isTourist().then(res=>{
          if(res.status ===1){
            if(res.data === 1){
              this.$router.push('/personal');
            }else{
              this.showPage = true;
              setTitle('登录');
              computePV({
                page_type:7
              })
            }
          }
        })
      }
      //获取验证码
      getSession().then(res => {
        if (res.status === 1) {
          this.session = res.data;
          this.$refs.verifyCode.src = baseURL + 's=User/verify/sid/' + res.data;
        }
      })
    },
    methods: {
      //暂不注册
      zanReg(){
        TouristLogin({
          "openId":this.oId,//openId
        }).then(res=>{
          if(res.status ===1){
            localStorage.setItem('token', res.data);
            this.$router.push('/greetingTitle');
          }
        })
      },
      //登录
      _login() {
        if (!(/^1[34578]\d{9}$/.test(this.phone))) {
          this.$dialog.toast({
            mes: '请输入有效的手机号码！',
            timeout: 1000,
          });
          this.$refs.phone.focus();
        } else if (this.code === '' || this.code.length < 4) {
          this.$dialog.toast({
            mes: '请输入4位数字验证码',
            timeout: 1000,
          });
          this.$refs.code.focus();
        } else if (this.noteCode === '' || this.noteCode.length < 6) {
          this.$dialog.toast({
            mes: '请输入6位短信验证码',
            timeout: 1000,
          });
          this.$refs.noteCode.focus();
        } else {
          login({
            "mobile": this.phone, //手机号
            "verify": this.code, //文字验证码
            "name": this.nick, //姓名 (登录也可以传输这个参数过来，传输的值为空)
            "msm_verify": this.noteCode,  //短信验证码
            "phpsid": this.session,  //session_id 当前验证码的session_id
            "openId":this.oId,//openId
          }).then(res => {
            if (res.status === 1) {
              localStorage.setItem('token', res.data);
              this.$dialog.toast({
                mes: res.expand.info,
                timeout: 1000,
                callback: () => {
                  this.$router.push('/personal');
                }
              });
            } else if (res.status < 0) {
              this.$dialog.toast({
                mes: res.expand.info,
                timeout: 1000,
                callback: () => {
                  switch (Number(res.expand.type)) {
                    case 1:
                      this.$refs.code.focus();
                      break;
                    case 2:
                      this.$refs.phone.focus();
                      break;
                    case 3:
                      this.$refs.noteCode.focus();
                      break;
                    case 4:
                      this.$refs.nick.focus();
                      break;
                  }
                }
              });
            } else if (res.stauts === 0) {
              this.$dialog.alert({mes: res.msg});
            }
          }).catch(res => {
            this.$dialog.alert({
              mes: '网络错误,确认重新加载!',
              callback: () => {
                window.location.reload()
              }
            });
          })
        }
      },
      //验证码更新
      verifyCode(item) {
        getSession().then(res => {
          if (res.status === 1) {
            this.session = res.data;
            item.src = baseURL + 's=User/verify/sid/' + res.data
            this.$refs.code.focus();
            this.code = ''
          }
        });
      },
      //发送验证码
      sendCode() {
        if (!(/^1[34578]\d{9}$/.test(this.phone))) {
          this.$dialog.toast({
            mes: '请输入有效的手机号码！',
            timeout: 1000,
          });
          this.$refs.phone.focus();
        }
        verify({
          "phpsid": this.session,//session_id
          "code": this.code,//用户输入的文字验证码
        }).then(res => {
          if (res.status === 1) {
            sendCaptcha({
              phone: this.phone
            }).then(res => {
              if (res.status === 1) {
                this.$dialog.loading.open('发送中...');
                this.start = true;
                this.$dialog.loading.close();
                this.$dialog.toast({
                  mes: '已发送',
                  icon: 'success',
                  timeout: 1500
                });
                if (res.data === 1) {
                  this.showNick = true;
                } else {
                  this.showNick = false;
                }
                const TIME_COUNT = 60;
                if (!this.timer) {
                  this.count = TIME_COUNT;
                  this.show = false;
                  this.timer = setInterval(() => {
                    if (this.count > 1 && this.count <= TIME_COUNT) {
                      this.count--;
                    } else {
                      this.show = true;
                      clearInterval(this.timer);
                      this.timer = null;
                    }
                  }, 1000)
                }
              } else if (res.status < 0) {
                this.$dialog.toast({
                  mes: res.expand.info,
                  timeout: 1000,
                });
              } else if (res.status === 0) {
                this.$dialog.alert({mes: res.msg});
              }
            })
          } else if (res.status === -1) {
            this.$dialog.toast({
              mes: res.expand.info,
              timeout: 1000,
            });
            this.verifyCode(this.$refs.verifyCode)
          }
        })
      },
      //获取url参数
      getUrl(para){
        var paraArr = location.search.substring(1).split('&');
        for(var i = 0;i < paraArr.length;i++){
          if(para == paraArr[i].split('=')[0]){
            return paraArr[i].split('=')[1];
          }
        }
        return '';
      },
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .title
    text-align: center;
    line-height: 1.47rem;
    position: relative;
    font-size: .54rem;
    color: $color-title;
    i
      position: absolute;
      top: 0;
      left: .44rem;
      color: $color-l-z;
      font-size: .62rem;
      display: line-block;
      line-height: 1.47rem;

  .avatar
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 5.26rem;
    margin-bottom: .2rem;
    img
      width: 2.9rem;
      height: 2.9rem;
    p
      width: 100%;
      font-size: .45rem;
      color: $color-text;
      text-align: center;
      margin-top: .3rem;

  .content
    padding-bottom: 1rem;

  .input-box
    position: relative;
    padding: 0 1.33rem;
    margin-bottom: .4rem;
    .border
      border-radius: .66rem;
      line-height: 1.32rem;
      padding-left: .5rem;
    input
      width: 100%;
      color: $color-text;
      font-size: .36rem;
    input:
    :-webkit-input-placeholder
      color: $color-input-p;
    span
      position: absolute;
      top: .42rem;
      right: 1.67rem;
      display: inline-block;
      font-size: .33rem;
      line-height: .52rem;
      padding: 0 .2rem;
      border-radius: .26rem;
      color: $color-note;
      background: -webkit-linear-gradient(-315deg, #f54cc5, #8755f0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    .count
      background: -webkit-linear-gradient(left, #e6e6e6, #e6e6e6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    img
      position: absolute;
      top: .28rem;
      right: 1.67rem;
      width: 2.53rem;
      height: .86rem;

  .btn
    margin: 0 1.33rem;
    line-height: 1.36rem;
    text-align: center;
    font-size: .42rem;
    color: $color;
    border-radius: .68rem;
    background-image: url("~common/image/btn-background.png");
    background-size: 100% 100%;
    margin-top: .8rem;

  .zanNotReg
    margin: 0 1.33rem;
    line-height: 1.36rem;
    text-align: center;
    font-size: .42rem;
    border-radius: .68rem;
    margin-top: .3rem;
    background:$color-b-g;
    color:$color;

</style>
